<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <canvas id="arc" width="500" height="500" style="border: 2px solid #00f;"></canvas>

  <script>
    const canvas = document.getElementById('arc')
    const ctx = canvas.getContext('2d')

    // 杯体
    ctx.beginPath()
    ctx.lineWidth = 3
    ctx.strokeRect(150, 200, 200, 200)
    // 杯柄
    ctx.beginPath()
    ctx.arc(350, 300, 50, -Math.PI / 2, Math.PI / 2)
    ctx.stroke()
    // 热气
    for (let i = 0; i < 4; i++) {
      drawLine(i)
    }

    ctx.beginPath()
    ctx.moveTo(50, 403)
    ctx.lineTo(450, 403)
    ctx.lineWidth = 5
    ctx.strokeStyle = 'brown'
    ctx.stroke()

    ctx.beginPath()
    ctx.moveTo(120, 403)
    ctx.lineTo(100, 470)
    ctx.stroke()
    ctx.beginPath()
    ctx.moveTo(380, 403)
    ctx.lineTo(400, 470)
    ctx.stroke()

    function drawLine(index) {
      ctx.beginPath()
      ctx.arc(185 + 40 * index, 100, 20, -Math.PI / 2, Math.PI / 2, true)
      ctx.arc(185 + 40 * index, 140, 20, -Math.PI / 2, Math.PI / 2, false)
      ctx.lineWidth = 1
      ctx.stroke()
    }
  </script>

</body>

</html>